from dash import html, dcc
import dash_bootstrap_components as dbc


from server import server


from modules.bigscreen.callback2 import get_org_products_summary

from .charts import *

from .charts3 import *


# 获取所有机构名称
def get_all_org_names():
    with server.app_context():
        orgs = db.session.query(Organization.short_name_c).all()
        return [org[0] for org in orgs] if orgs else []


#创建设备金额数量柱状图
def create_org_equipment_amount_panel():
    
    return html.Div([
        html.Div(
            html.Span("资产分布统计", id="title-org-equipment-chart", n_clicks=0, style={ "textDecoration": "underline" ,"cursor": "pointer", "color": "#fff"}),
            className="panel-title",
            style={"color": "#112360", "fontSize": "16px","fontWeight": "bold",  "padding": "5px 5px"}
        ),
        dcc.Graph(
            id="org-equipment-chart",
            figure=create_org_equipment_amount_chart(*get_org_products_summary()),
            config={'displayModeBar': False},
            style={"height": "100%", "marginTop": "5px", "width": "90%", "margin": "0 auto"}
        )
    ], className="dashboard-panel", style={
        "margin": "2px 2px 2px 2px",
        
        "background": "#112360",
        "borderRadius": "10px",
        "boxShadow": "0 0 14px #1a4a7a",
        "flex": "1 1 0",
        "minHeight": "0",
        "height": "calc(50vh - 100px)",
        "display": "flex",
        "flexDirection": "column"
    })

#创建设备分类金额圆环图
def create_donut_panel():
    return html.Div([
        html.Div([
            html.Span("资产分类金额统计", id="title-donut-panel", n_clicks=0, style={ "textDecoration": "underline" ,"cursor": "pointer","background": "#112360", "color": "#ffffff", "fontSize": "16px", "fontWeight": "bold", "marginRight": "auto"}),
            dcc.Dropdown(
                id='donut-type-mode',
                options=[
                    {'label': '按金额', 'value': 'amount'},
                    {'label': '按台数', 'value': 'count'}
                ],
                value='amount',
                clearable=False,
                style={'width': '120px', 'marginLeft': '10px'}
            ),
            dcc.Dropdown(
                id='donut-org-selector',
                options=[{'label': '全部机构', 'value': 'all'}] + [
                    {'label': name, 'value': name} for name in get_all_org_names()
                ],
                value='all',
                clearable=False,
                style={'width': '200px', 'marginLeft': 'auto'}
            ),
        ], style={'display': 'flex', 'flexDirection': 'row', 'alignItems': 'center', 'justifyContent': 'space-between', 'marginBottom': '10px'}),
        html.Div([
            dcc.Graph(id='donut-type', config={'displayModeBar': False}, style={'width': '45%', 'display': 'inline-block', 'height': '201px','marginTop': '30px'}),
            dcc.Graph(id='donut-price', config={'displayModeBar': False}, style={'width': '45%', 'display': 'inline-block', 'height': '201px','marginTop': '30px'}),
        ], style={'display': 'flex', 'justifyContent': 'space-between'})
    ], className="dashboard-panel", style={
        "margin": "2px 2px 2px 2px",
        "background": "#112360",
        "borderRadius": "10px",
        "boxShadow": "0 0 16px #1a4a7a",
        "flex": "1 1 0",
        "minHeight": "0",
        "display": "flex",
        
        "flexDirection": "column"
    })

#创建完好率图表
def create_availability_panel():
    return html.Div([
        html.Div("设备完好率及年限指数", id="title-org-equipment-health-chart", n_clicks=0,className="panel-title", style={ "textDecoration": "underline" ,"cursor": "pointer","color": "#ffffff", "fontSize": "16px", "fontWeight": "bold", "padding": "5px 5px"}),
        dcc.Graph(
            id="org-equipment-health-chart",
            figure=create_org_equipment_health_chart(get_org_running_status_list()),
            config={'displayModeBar': False},
            style={"height": "100%", "marginTop": "5px", "width": "90%", "margin": "0 auto"}
        ),
    ], className="dashboard-panel", style={
        "margin": "2px 2px 2px 2px",
        "background": "#112360",
        "borderRadius": "10px",
        "boxShadow": "0 0 16px #1a4a7a",
        "flex": "1 1 0",
        "minHeight": "0",
        "display": "flex",
        "flexDirection": "column"
    })


# # #创建维修次数图表
def create_repair_count_panel():
    return html.Div([
        html.Div("维修次数统计",  id="title-org-equipment-repaire-count-chart", n_clicks=0,className="panel-title", style={ "textDecoration": "underline" ,"cursor": "pointer","color": "#ffffff", "background": "#112360","fontSize": "16px", "fontWeight": "bold", "padding": "5px 10px"}),      
        dcc.Graph(
            id="org-equipment-repaire-count-chart",
            figure=create_repair_count_chart(),
            config={'displayModeBar': False},
             style={"height": "100%", "marginTop": "5px", "width": "90%", "margin": "0 auto"}
        ),
    ], className="dashboard-panel", style={
        "margin": "2px 2px 2px 2px",
        "background": "#112360",
        "borderRadius": "10px",
        "boxShadow": "0 0 16px #1a4a7a",
        "flex": "1 1 0",
        "height": "calc(40vh - 10px)",
        "minHeight": "0",
        "display": "flex",
        "flexDirection": "column"
    })


#创建保养巡检完成率圆环图
def create_maintain_inspection_panel():
    return html.Div([
        html.Div([
            html.A(
                "保养/巡检完成率分析",
                id="title-maintain-inspection-analysis", # 新增ID，如果需要回调交互
                href="#", # 初始链接，可根据需求修改或在回调中动态更新
                target="_self", # 默认在当前页面打开，可根据需求修改
                className="panel-title",
                style={
                    "color": "#ffffff",
                    "fontSize": "16px",
                    "fontWeight": "bold",
                    "textDecoration": "underline", # 添加下划线
                    "cursor": "pointer", # 显示手型光标
                    "marginRight": "10px" # 标题和下拉框之间的间距
                }
            ),
            dcc.Dropdown(
                id='maintain-inspection-selector',
                options=[
                    {'label': '保养', 'value': 'maintain'},
                    {'label': '巡检', 'value': 'inspection'}
                ],
                value='maintain',
                clearable=False,
                style={'width': '120px', 'marginLeft': '10px'} # 保持原有左边距
            ),
            html.A(
                id='total-count-link',
                children=html.Div("总次数: 0", id='total-count-display', style={
                    "color": "#ffffff", "fontSize": "16px", "fontWeight": "bold", "padding": "5px 10px",
                    "marginLeft": "10px", "cursor": "pointer", "textDecoration": "underline" # 添加下划线
                }),
                target="_blank", # 在新页面打开
                href="#" # 初始链接为空，由回调函数更新
            )
        ], style={'display': 'flex', 'flexDirection': 'row', 'alignItems': 'center', 'justifyContent': 'flex-start', 'marginBottom': '10px'}), # 调整为flex-start以左对齐
        html.Div(id='donut-chart-container', children=create_donut_chart2('maintain'))
    ], className="dashboard-panel", style={
        "margin": "2px 2px 2px 2px",
        "background": "#112360",
        "borderRadius": "10px",
        "boxShadow": "0 0 16px #1a4a7a",
        "flex": "1 1 0",
        "minHeight": "0",
        # "height": "calc(50vh - 100px)",
        "height": "100%",
        "display": "flex",
        "flexDirection": "column"
    })


# 创建事件区域面板
def create_evnet_area_panel():
    return html.Div([
        html.Div(
            html.Span("事件监控", className="panel-title", style={
                "color": "#ffffff", "fontSize": "16px", "fontWeight": "bold", "padding": "5px 10px"
            }),
            className="panel-title-container"
        ),
        html.Div(
            create_evnet_area(),  # 调用 charts3.py 中的 create_evnet_area 函数
            style={
                # "height": "calc(30vh - 100px)",
                "height": "100%",
                "marginTop": "5px",
                "width": "90%",
                "margin": "0 auto",
                "display": "flex",
                "flexDirection": "column",
                "justifyContent": "center",
                "alignItems": "center"
            }
        ),
    ], className="dashboard-panel", style={
        "margin": "2px 2px 2px 2px",
        "background": "#112360",
        "borderRadius": "10px",
        "boxShadow": "0 0 16px #1a4a7a",
        "flex": "1 1 0",
        "minHeight": "0",
        "display": "flex",
        "flexDirection": "column"
    })

    # 创建功能区域面板
def create_function_area_panel():
    return html.Div([
        html.Div(
            html.Span("功能区", className="panel-title", style={
                "color": "#ffffff", "fontSize": "16px", "fontWeight": "bold", "padding": "5px 10px"
            }),
            className="panel-title-container"
        ),
        html.Div(
            create_function_area(),  
            style={
                # "height": "calc(30vh - 100px)",
                "height": "100%",
                "marginTop": "5px",
                "width": "90%",
                "margin": "0 auto",
                "display": "flex",
                "flexDirection": "column",
                "justifyContent": "center",
                "alignItems": "center"
            }
        ),
    ], className="dashboard-panel", style={
        "margin": "2px 2px 2px 2px",
        "background": "#112360",
        "borderRadius": "10px",
        "boxShadow": "0 0 16px #1a4a7a",
        "flex": "1 1 0",
        "minHeight": "0",
        "display": "flex",
        "flexDirection": "column"
    })


def create_header_with_clock_panel():
    return html.Div([
        html.Div(id='realtime-clock', style={
            'color': 'white',
            'fontSize': '32px',
            'marginRight': '60px',
            'display': 'inline-block',
            'verticalAlign': 'middle',
            'fontWeight': 'bold',
            'letterSpacing': '2px',
        }),
       
        # 直接使用DropdownMenu
        dbc.DropdownMenu(
            label='≡',
            children=[
                # html.A("退出登录", href="/dash/logout", className="dropdown-item", id="logout-btn"),
                # html.A("修改密码", href="/dash/change-password", className="dropdown-item", id="change-pwd-btn"),
                # html.Hr(className="dropdown-divider"),
                # html.A("用户管理", href="/dash/user-manage", className="dropdown-item", id="user-mgr-btn"),
            ],
            # 关键配置 - 确保正常的下拉行为
            nav=False,
            in_navbar=False,
            align_end=True,
            direction="down",
            # 自定义按钮样式
            toggle_style={
                'background': 'transparent',
                'border': 'none',
                'color': 'white',
                'fontSize': '32px',
                'padding': '0',
                'lineHeight': '1',
            },
            # 使用className代替menu_style
            className="admin-menu-dropdown",
            # 确保下拉菜单可以正常关闭
            id="admin-dropdown-menu"
        ),
        
        dcc.Interval(id='clock-interval', interval=1000, n_intervals=0),
    ], style={
        'position': 'fixed',
        'top': '24px',
        'right': '32px',
        'zIndex': 10000,
        'display': 'flex',
        'alignItems': 'center',
    })
